<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/pay/fun' }">支付管理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/pay/fun' }">支付方式</el-breadcrumb-item>
        </el-breadcrumb>
         <!-- 添加支付方式 -->
        <el-form :inline="true"  class="user-search">  
            <el-form-item>
                <el-button size="small" type="primary" icon="el-icon-plus" @click="addHandleEdit">添加</el-button>
            </el-form-item>
        </el-form>
       <!--列表-->
        <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
            <el-table-column sortable prop="pay_code" label="支付代码" width="300">
            </el-table-column>
            <el-table-column sortable prop="pay_name" label="支付方式" width="300">
            </el-table-column>
           
            <el-table-column align="center" label="操作" min-width="200">
                <template slot-scope="scope"> 
                    <el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)" plain>删除</el-button>
                </template>
            </el-table-column>
        </el-table>
       
        <!-- 编辑界面 -->
        <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click="closeDialog">
            <el-form label-width="120px" :model="editForm" :rules="rules" ref="editForm">
                <el-form-item label="支付代码" prop="pay_code">
                    <el-input size="small" v-model="editForm.pay_code" auto-complete="off" placeholder="请输入支付代码"></el-input>
                </el-form-item>
                <el-form-item label="支付名称" prop="pay_name">
                    <el-input size="small" v-model="editForm.pay_name" auto-complete="off" placeholder="请输入支付名称"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="closeDialog">取消</el-button>
                <el-button size="small" type="primary" v-if="editForm.pay_code && editForm.pay_name" :loading="loading" class="title" @click="submitForm('editForm')">保存</el-button>
                <el-button size="small" type="primary" v-else :loading="loading" class="title"  disabled>保存</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import axios from 'axios';

export default {
    // 默认子路由 不能有name属性
    name: "Fun",
    data() {
        return {
            loading: false, //是显示加载,
            editFormVisible: false, //控制编辑页面显示与隐藏
            dist: "", //区别唯一标识符  add 添加  del删除  edit编辑
            distNum: "",  //编辑的第几条数据
          
            listData: [ 
                {
                    pay_code: "支付编号1",
                    pay_name: "支付名称1"
                },
                
            ],
            editForm: {
                pay_code: '',
                 pay_name: ""
                
            },
            title: '添加',
            rules: {
                pay_code: [{ required: true, message: '请输入支付代码', trigger: 'blur' }],
                pay_name: [{ required: true, message: '请输入支付名称', trigger: 'blur' }]
            },
            searchArr: []
        }
    },
    methods: {
       
        //add
        addHandleEdit() {
            this.dist = "add";
            this.editFormVisible = true;
            

        },
       
        //提交保存
        submitForm(editData) {
            this.$refs[editData].validate(valid => {
                // console.log(newStampChangeFormat());
                if (valid) {
                    if (this.dist == "add") {
                        // /pay/add
                         axios.get("/pay/add",{
                             params: {  
                                pay_code: this.editForm.pay_code,  
                                pay_name: this.editForm.pay_name  
                            } 
                         }).then(res => {
                             if(res.data.code == 200) {
                                  this.$message({
                                    message: '添加成功',
                                    type: 'success'
                            });
                            this.getList();
                             } else if(res.data.code == 302) {
                                  this.$message({
                                    message: '支付方式已存在，请勿重复添加',
                                    type: 'warning'
                                    });
                             } else {
                                  this.$message.error('添加失败');
                             }
                            
                             
                         })
                       
                    }
                        
                    
                    
                    //清空内容
                    this.editForm.pay_code = "";
                    this.editForm.pay_name = "";
                    //关闭dialog
                    this.editFormVisible = false;
                    
               


                } else {
                    return false
                }
            })
        },
        //关闭dialog
        closeDialog() {
            this.editFormVisible = false;
            //数据清空
            this.editForm.pay_code = "";
            this.editForm.pay_name = "";
        },
        //删除
        deleteUser(index, row) {
            let that = this;
            this.dist = "del"
            // console.log(index, row);
             this.$confirm('是否删除该支付方式？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                     axios.get("/pay/del",{
                        params: {  
                          pay_id: row.pay_id
                       } 
                    }).then(
                        res => {
                           if(res.data.data) {
                                this.$message({
                                    message: '删除成功',
                                    type: 'success'
                            });
                            this.getList();
                           } else {
                               this.$message.error('删除失败');
                           }
                        }
                    )
                    // //根据商品代码检索到对应数据remove  splice
                    // this.listData.forEach((element, i) => {
                    //     if (element.pay_code == row.pay_code) {
                    //         //找到商品
                    //         this.listData.splice(i, 1);
                           
                    //     } 
                    // })
                }).catch(() => {
                    this.$message({
                         message: '已取消',
                         type: 'warning'
                    });
                })
            
        },
        getList() {
            axios.get("/pay/list")
            .then(
                res => {
                    this.listData = res.data.data;
                    this.total = res.data.data.length;
                    console.log(res.data.data)
                }
            )
        }
    },
    created() {
        this.getList();
    }
}
</script>

<style scoped>
.el-form {
    margin: 0;
    padding: 0;
    text-align: left;
}
.el-pagination {
    margin-top: 20px;
}
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
</style>

